<template>
  <u-popup v-model="show" mode="bottom">
    <div class="title">素材库</div>

    <div class="btns">
      <div v-for="(item, index) in shapeImgList" :key="item.id" class="btn" :class="{ active: shapeIndex == index }" @click="setShapeIndex(index)">
        {{ item.cateName }}
      </div>
    </div>

    <div class="scroll-body">
      <scroll-view scroll-y="true" style="height: 300rpx">
        <view class="font-body">
          <view v-for="item in shapeImgList[shapeIndex]?.children" :key="item.id" class="font-li" @click="bindCate(item)">
            <image :src="item.pic"></image>
          </view>
        </view>
      </scroll-view>
    </div>
  </u-popup>
</template>
<script setup lang="ts">
import { computed, ref, unref, onMounted, shallowRef } from 'vue';
import { getfonts, getMaterialCate } from '@/api/designApi';

const shapeIndex = ref(0);
const setShapeIndex = (val) => {
  shapeIndex.value = val;
};

const shapeImgList = shallowRef([]);

onMounted(() => {
  getMaterialCate().then((res) => {
    shapeImgList.value = res.data;
  });
});

const emit = defineEmits(['selectCate']);

const bindCate = (item) => {
  emit('selectCate', item);
  show.value = false;
};

const show = ref(false);
const open = () => {
  show.value = true;
};

defineExpose({
  open,
});
</script>

<style scoped lang="scss">
.title {
  height: 42rpx;
  font-weight: bold;
  font-size: 32rpx;
  color: #222222;
  line-height: 42rpx;
  text-align: center;
  margin: 32rpx auto;
  padding: 20rpx 0;
}

.btns {
  display: flex;
  align-items: center;
  gap: 14rpx;
  padding: 32rpx 32rpx 0;
  .btn {
    height: 48rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    font-weight: 400;
    font-size: 28rpx;
    line-height: 48rpx;
    text-align: center;
    background: #f3f7f8;
    color: #6f6f6f;
    padding: 0 24rpx;
    &.active {
      color: #ffffff;
      background: #f25a27;
    }
  }
}

.scroll-body {
  padding: 32rpx;
}
.font-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16rpx;

  .font-li {
    image {
      width: 164rpx;
      height: 164rpx;
      background: #f3f7f8;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }
  }
}
</style>
